import React,{Component} from 'react';
import{
Button,
StyleSheet,
View,
Text,
FlatList,
TouchableHighlight,
Dimensions
} from 'react-native';
import _ from 'lodash'
import {SafeAreaView} from 'react-navigation'
import Cityjson from '../../datasource/city.json'
//获取宽高
var {height, width} = Dimensions.get('window')
const sourceJson = Cityjson
//设置工具列表页面
class MyListItem extends Component{
  constructor(props){
    super(props)
  }
  _onPress = (id)=>{
    that = this
    setTimeout(function(){
      that.props.onPressItem(id)
    },30)  
  }
  render(){
    if(this.props.ColorStyles){
      var colors =  this.props.ColorStyles 
    }else{
      var colors = this.props.sorceColor
    }
    return (
      <TouchableHighlight 
        onPress={this._onPress.bind(this,this.props.id)}
        underlayColor={this.props.underlayColor}  
        activeOpacity={0.5}   
        style={{ borderRadius: 8}}
      >
      <View style={styles.item}>
        <Text style={[styles.title,{color:colors}]}>
          {this.props.title}
        </Text>
      </View>
      </TouchableHighlight>
    )
  }
}
class Citylist extends Component{
  constructor(props){
    super(props);
    this.state = {
      dataInfo : [],
      selectedCitys:[],

      selected: (new Map(): Map<string, boolean>), 
    }
  }
  componentDidMount() {
    try
      {
        const {datajsons,choseName} = this.props.navigation.state.params
        
        if(_.isArray(datajsons[0].sub)==false&&this.props.person==true){
          var dataJson = []
          dataJson = dataJson.concat(datajsons)
          dataJson.shift()
        }else{
          var dataJson = []
          dataJson = dataJson.concat(datajsons) 
        }
        
        this.setState({
          dataInfo:this.state.dataInfo.concat(dataJson)
        })
      }
    catch(err)
      {
        let oldJson = sourceJson
        if(this.props.person==true){
          oldJson.shift()
        }
        this.setState({
          dataInfo:oldJson
        })
      }
  }

  _childMethod(arr) {
    var newJson = _.clone(this.state.dataInfo)
    //newJson = newJson.concat(this.state.dataInfo)
    if(this.props.person==true){
      newJson.map((item,i)=>{
        if(i===arr){
          item.style = this.props.onPressColor
        }else{
          item.style = null
        }
      })
      this.setState({
        dataInfo:newJson
      })
    return newJson[arr].name
    }else{
      var newArr = this.state.selectedCitys
      if(arr==0){
        if(newJson[arr].style==this.props.onPressColor){
          newJson.map((item,i)=>{
            newJson[i].style = this.props.sorceColor
          })
          newArr = []
        }else{
          newArr = []
          newJson.map((item,i)=>{
            newJson[i].style = this.props.onPressColor
            newArr.push(item.name)
          })
          newArr.shift()
        }
      }else{
        if(newJson[arr].style==this.props.onPressColor){
          newJson[arr].style = this.props.sorceColor
          //newArr.push(newJson[arr].name)
          newArr = _.without(newArr,newJson[arr].name)
        }else{
          newJson[arr].style = this.props.onPressColor
          newArr.push(newJson[arr].name) 
        }
      }
      this.setState({
        dataInfo:newJson,
        selectedCitys:newArr
      })
      return newArr
    }
  }
  _isAll(){
    let allJson = _.clone(sourceJson)
      if(allJson[0].style&&allJson[0].style==this.props.onPressColor){
        allJson[0].style=this.props.sorceColor
      }else{
        allJson[0].style=this.props.onPressColor
      }
      this.setState({
        dataInfo:allJson,
      })
    console.log('this is 全国')
  }
  _onPressItem(id:string){
    try{
      //判断是否有第三级
      if(_.isArray(this.state.dataInfo[id].sub)){
        let TownName = []
            TownName.push(this.props.navigation.state.params.choseName[0])
            TownName.push(this.state.dataInfo[id].name)
        this.props.navigation.navigate('City', { 
          datajsons: this.state.dataInfo[id].sub,
          choseId:id,
          choseName:TownName,
          callBackFun:this._childMethod.bind(this)
      })
      }else{
        var TownName = []
        if(this.state.dataInfo[id].name=='全国'){
          TownName = this._isAll()
          this.props.navigation.setParams({
            choseTittle:'确定',
            ProviceCity:'全国',
            getCity:'全国'
          })
          return
        }else{
          TownName = this._childMethod(id)
          this.props.navigation.setParams({
            choseTittle:'确定',
            ProviceCity:this.props.navigation.state.params.choseName,
            getCity:TownName
          })
        }
        

      }
    }catch(err){
      let CityName = []
      CityName.push(this.state.dataInfo[id].name)
      this.props.navigation.navigate('City', { 
        datajsons: this.state.dataInfo[id].sub,
        choseId:id,
        choseName:CityName,
        callBackFun:this._childMethod.bind(this)
      })
    }
  }
  _renderItem = ({item,index})=>(
    <MyListItem
      id={index}
      onPressItem={this._onPressItem.bind(this)}
      {...this.props}
      ColorStyles = {item.style}
      title={item.name}
    />
  )
  _keyExtractor = (item,index)=>item.name
  render(){
    return(
        <FlatList
          data={this.state.dataInfo}
          extraData = {this.state}
          keyExtractor={this._keyExtractor.bind(this)}
          renderItem = {this._renderItem.bind(this)}
          onEndReachedThreshold = {20}
          showsVerticalScrollIndicator = {false}
          horizontal = {false}
          numColumns ={3}
          columnWrapperStyle={styles.columStyle}
        />
    );
    
  }
}
const styles = StyleSheet.create({
  item:{
    width:width/3,
    marginBottom:10,
    backgroundColor:'transparent'
  },
  thumb:{
    width:width,
    height:width*0.5,
    resizeMode:'cover'
  },
  title:{

    padding:10,
    fontSize:18,
    color:'#333',
    textAlign:'center'
  },
  columStyle:{
    borderWidth:0,
    
    backgroundColor:'transparent'
  }
})
module.exports =  Citylist;